<template>
  <div class='record-list-container'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               @close="dialogClose"
               title="定位记录">
      <el-form :model="requestParam"
               label-width="150px">
        <el-row class="request-param">
          <el-col :span="5">
            <span>设备编号：13398909876</span>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用起止时间">
              <el-date-picker class="col-8"
                              v-model="requestParam.time_range"
                              @change="chooseTime"
                              type="datetimerange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="3"
                  :offset="4">
            <el-button @click="getPositionRecord"
                       type="primary">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :highlight-current-row='true'
                class="record-list-table"
                :data='recordListData.data'
                border>
        <el-table-column prop='upload_time'
                         label='使用日期'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='lat'
                         label='经度'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='lon'
                         label='纬度'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='power'
                         label='电量'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { BdPositionApi } from '@/services/EquipmentManage'
export default {
  data () {
    return {
      visible: false,
      requestParam: {
        created_at_greater: '',
        created_at_less: '',
        time_range: [],
        page: 1,
        per_page: 10,
        gps_id: 0
      },
      recordListData: {
        data: [],
        total_page: 0,
        total_count: 0
      }
    }
  },
  props: {
    positionRecordDialogVisible: Boolean,
    positionGpsId: Number
  },
  watch: {
    positionRecordDialogVisible (newval, oldval) {
      this.visible = newval
    },
    positionGpsId (newval, oldval) {
      this.requestParam.gps_id = newval
      this.getPositionRecord()
    }
  },
  methods: {
    dialogClose () {
      this.$emit('update:positionRecordDialogVisible', false)
    },
    // 选择开始时间及结束时间
    chooseTime () {
      // console.log(this.requestParam, 'choose time')
      if (this.requestParam.time_range) {
        this.requestParam.created_at_greater = this.requestParam.time_range[0]
        this.requestParam.created_at_less = this.requestParam.time_range[1]
      }
    },
    // 获取定位记录数据
    getPositionRecord () {
      BdPositionApi.getPositionRecord({
        params: this.requestParam
      }).then(res => {
        //console.log(res, 'get position record')
        if (res.code === 0) {
          this.recordListData = res.data
        }
      }, err => {
        console.log(err)
      })
    }
  },
  created () {

  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.record-list-container {
  .request-param {
    margin-bottom: 15px;
    > div {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
